<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/public :: #public_head}"></head>
<body>
<div class="container">
    <div th:replace="~{/public :: #public_header}"></div>
    <div th:replace="~{/public :: #public_time}"></div>
    <div class="main">
        <div th:replace="~{/public :: #public_left(activeUri='user')}"></div>
        <div class="right">
            <div class="form-add">
                <form>
                    <div>
                        <label for="username">用户名：</label>
                        <input type="text" id="username" name="username">
                    </div>
                    <div>
                        <label for="password">登录密码：</label>
                        <input type="password" id="password" name="password" >
                    </div>
                    <div>
                        <label for="nickname">用户昵称：</label>
                        <input type="text" id="nickname" name="nickname">
                    </div>
                    <div>
                        <label for="email">电子邮箱：</label>
                        <input type="text" id="email" name="email">
                    </div>
                    <div style="display: flex;align-items: center;">
                        <label>用户头像：</label>
                        <input type="file" id="imgUp" accept="image/*">
                        <img id="userPic" src="#" alt="" width="200" height="300">
                    </div>

                </form>
                <div>
                    <button type="submit" onclick="submit()">提交</button>
                    <input type="button" value="返回" onclick="history.back(-1)"/>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="~{/public :: #public_footer}"></div>
</div>
<script>
    document.getElementById('imgUp').addEventListener('change', function(e) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('userPic').setAttribute('src', e.target.result);
            document.getElementById('userPic').style.display = 'block';
        };
        reader.readAsDataURL(e.target.files[0]);
    });
    function submit() {
        var username = document.getElementById('username').value;
        if (username == '') {
            alert('用户名不能为空');
            return;
        }
        var password = document.getElementById('password').value;
        /*if (password == '') {
            alert('密码不能为空');
            return;
        }*/
        var nickname = document.getElementById('nickname').value;
        /*if (nickname == '') {
            alert('用户昵称不能为空');
            return;
        }*/
        var email = document.getElementById('email').value;
        /*if (email == '') {
            alert('电子邮箱不能为空');
            return;
        }*/
        var formData = new FormData();
        formData.append('username', username);
        formData.append('password', password);
        formData.append('nickname', nickname);
        formData.append('email', email);
        if (document.getElementById('imgUp').files.length > 0) {
            formData.append('userPic', document.getElementById('userPic').src);
        }
        $.ajax({
            url: '/admin/user/',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (data) {
                alert('添加成功')
            },
            error: function (data) {
                alert('添加失败');
            }
        })
    }
</script>
</body>
</html>